<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* html{
            font-size: 100px; 1rem==110.4px
        } */
        #box{
            /* iphone6 测量得到宽度是100px==1rem; 测量得到 125px==1.25rem; 测量高度是 58px */
            /* iphone6 plus: 测量得到宽度 200px= 200/110.4=1.812rem */
            width: 1rem; 
            height: 0.58rem;
            background: lightsalmon;
        }

        /* iphone6效果图 测量：宽度278px；高度 180px；边框：3px，颜色：红色 */
        #box2{
            width: 2.78rem;
            height: 1.8rem;
            border:0.03rem solid red;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
</body>
<script>
    /*
    iphone6 : 375
    iphone 6plus :414

    获取设备宽度：
    document.documentElement.clientWidth

    根节点：
    document.documentElement
    */

    // fontsize 在iphone6： 375/3.75=100  ; 在iphone6 plus: 414 /3.75 =110.4
   let fontsize = document.documentElement.clientWidth / 3.75;//得到一个尺寸/比例=>html的fontsize 
//    console.log('得到的大小是:' + fontsize);//100
    document.documentElement.style.fontSize = fontsize + 'px';
</script>
</html>